import React from 'react'
import GrayBorderRoundAvatar from "../../../../../../shared-components/GrayBorderRoundAvatar/GrayBorderRoundAvatar";
import CustomButton from "../../../../../../shared-components/CustomButton/CustomBotton";
import './StarInfo.css'
import {lives} from "../../../../../../utils/mockdata";
import GameCard from "../../../../../../shared-components/GameCard/GameCard";
const StarInfo = props => {
    const {
        star,
    } = props

    const template = (
        <div>
            <div className='live-room-star-info-upper-ctn'>
                <div className='flex-space-between-align-center live-room-star-info-upper-star'>
                    <div className='flex-space-between-align-center'>
                        <div className='live-room-star-info-upper-star-avatar'>
                            <GrayBorderRoundAvatar
                                size='mid'
                                avatarUrl={star.imgUrl}
                            />
                        </div>

                        <div className='live-room-star-info-upper-star-name'>
                            <p>{star.name}</p>
                            <p>566 <span>粉丝</span></p>
                        </div>
                    </div>
                    <div>
                        <CustomButton
                            size='small'
                        >
                            关注TA
                        </CustomButton>
                    </div>
                </div>
                <div className='live-room-star-info-upper-ann'>
                    <p>
                        主播公告
                    </p>
                    <div className='live-room-star-info-upper-ann-detail'>
                        <span>进QQ群：156789814</span>
                    </div>
                </div>
            </div>
            <div className='live-room-star-info-lower-ctn'>
                <p>主播作品</p>
                <div className='flex-space-between flex-wrap-container'
                >
                    {lives.map(game => <GameCard key={game.title} game={game}/>)}
                </div>
            </div>
        </div>

    )

    return template
}

export default StarInfo
